/*
  学习目标：使用shouldComponentUpdate决定是否更新

*/

import React, { Component } from 'react';

export default class App extends Component {
  state = { count: 0, msg: 'hello React' };

  render() {
    const { count, msg } = this.state;
    return (
      <div>
        <h1>{count}</h1>
        <h1>{msg}</h1>
        <button onClick={() => this.setState({ count: count + 1 })}>
          点我修改count
        </button>

        <button onClick={() => this.setState({ msg: msg + '~' })}>
          点我修改msg
        </button>
        <Child count={count}></Child>
      </div>
    );
  }
}

class Child extends React.Component {
  shouldComponentUpdate(nextProps) {
    // 比较新旧props的值变化， 决定是否更新
    // 如果count不一致， 返回true， 更新组件
    if (nextProps.count !== this.props.count) {
      return true;
    } else {
      // 如果count一致， 返回false， 不需要更新组件
      return false;
    }
  }

  render() {
    console.log('render被重新执行了  ----->  ');
    return <div>Child - {this.props.count}</div>;
  }
}
